<!-- App.vue -->
<script>
// 你可以在这里定义组件的逻辑
import PageHeader from './components/PageHeader.vue';
import PageFoot from './components/PageFoot.vue';
export default{
  components: {PageHeader,PageFoot}
}
</script>

<template>
  <!-- 使用一个 div 作为根元素 -->
  <div>
    <page-header></page-header>
    <nav>
      <router-link to="/">书库</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <main>
      <router-view />
    </main>
    <page-foot></page-foot>
  </div>
</template>

<style scoped>
/* 你可以在这里定义组件的样式 */
a{
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 4px solid #003388;
  border-right: 4px solid #003388;
  color: white;
}
 
a:hover{
  color: #d0ff00;
  background-color: #0a084e;
  border-left: 4px solid #d0ff00;
  border-right: 4px solid #d0ff00;
}

</style>